<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/code.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        #createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .err {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form class="box" onsubmit="return false" autocomplete="on">
        <p>
            <label for="">用户名:</label>
            <input type="text" id="user">
            <span id="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="password" id="pwd">
            <span id="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" id="phone">
            <span id="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" id="email">
            <span id="email_span"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input type="text" id="code">
            <span id="createCode">a1b2</span>
            <span id="code_span"></span>
        </p>
        <p>
            <input id="regBtn" type="submit" value="注册">
            <input id="retBtn" type="reset" value="取消">
        </p>
    </form>
</body>
<script>
      // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序 
    // a. 长度  6-12位 
    // b. 不能以数字开头
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _    6-12位 

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111  A1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3 

    // 确认密码  
    // 和密码相同  

    // 验证码  => 封装一个方法可以随机生成四位验证码 (0-9 a-z A-Z )
    // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )   => createCode
    // 2. 点击 验证码 进行切换
    // 3. 验证码输入判断  (输入的  随机生成的  保持一致) 
</script>
<script>
    // 1. JS操作元素之前必须先获取元素
    var userInp = document.getElementById("user");
    var userSpan = document.getElementById("user_span");
    var pwdInp = document.getElementById("pwd");
    var pwdSpan = document.getElementById("pwd_span");
    var phoneInp = document.getElementById("phone");
    var phoneSpan = document.getElementById("phone_span");
    var emailInp = document.getElementById("email");
    var emailSpan = document.getElementById("email_span");
    var codeInp = document.getElementById("code");
    var codeSpan = document.getElementById("code_span");
    var createCode = document.getElementById("createCode");

    var regBtn = document.getElementById("regBtn");

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;
    var isCodeOk = false;

    createCode.innerText = randCode();
    createCode.onclick = function () {
        createCode.innerText = randCode();
    }

    // 一步到位
    userInp.onblur = function () {
        isUserOk = false;
        var user = userInp.value.trim();
        userInp.value = user;

        var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;

        if (userReg.test(user)) {


            // var xhr = new XMLHttpRequest();

            // xhr.open("get", "../php/isExistUser.php?user=" + user, true);

            // xhr.send();

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         var result = xhr.responseText;
            //         console.log(result);
            //         var data = JSON.parse(result);
            //         console.log(data);
            //         var { status, msg } = data;

            //         if (status) {
            //             userSpan.textContent = "√";
            //             userSpan.className = "right";
            //             isUserOk = true;
            //         } else {
            //             userSpan.textContent = "* 用户名已存在!";
            //             userSpan.className = "err";
            //         }

            //     }
            // }

            $.ajax({
                // type:"get",
                url: "../php/isExistUser.php",
                data: { user },
                // async:true,
                dataType: "json",
                success: function (data) {
                    var { status, msg } = data;
                    if (status) {
                        userSpan.textContent = "√";
                        userSpan.className = "right";
                        isUserOk = true;
                    } else {
                        userSpan.textContent = "* 用户名已存在!";
                        userSpan.className = "err";
                    }
                }
            })


        } else {
            userSpan.textContent = "* 用户名由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头";
            userSpan.className = "err";
        }
    }
    pwdInp.onblur = function () {
        var pwd = pwdInp.value.trim();
        isPwdOk = false;

        var pwdReg = /^[\w$]{6,12}$/;

        if (pwdReg.test(pwd)) {
            pwdSpan.textContent = "√";
            pwdSpan.className = "right";

            var isExistNum = false;
            var isExistSmall = false;
            var isExistBig = false;
            var isExistSpe = false;

            if (/[0-9]/.test(pwd)) isExistNum = true;
            if (/[a-z]/.test(pwd)) isExistSmall = true;
            if (/[A-Z]/.test(pwd)) isExistBig = true;
            if (/[_$]/.test(pwd)) isExistSpe = true;

            // var isExistNum = /[0-9]/.test(pwd) ? true :false;

            var sum = isExistNum + isExistSmall + isExistBig + isExistSpe;

            //  true + true + false

            switch (sum) {
                case 1:
                    pwdSpan.innerText = "密码强度:弱";
                    pwdSpan.style.color = "green";
                    break;
                case 2:
                    pwdSpan.innerText = "密码强度:中";
                    pwdSpan.style.color = "orange";
                    break;
                case 3:
                    pwdSpan.innerText = "密码强度:强";
                    pwdSpan.style.color = "yellow";
                    break;
                case 4:
                    pwdSpan.innerText = "密码强度:超强";
                    pwdSpan.style.color = "gold";
                    break;
            }

            isPwdOk = true;

        } else {
            pwdSpan.textContent = "* 密码由数字,大小写字母,下划线,$组成,6-12位";
            pwdSpan.className = "err";
        }
    }

    // 一步到位

    phoneInp.onblur = function () {
        isPhoneOk = false;
        var phone = phoneInp.value.trim();
        phoneInp.value = phone;

        var phoneReg = /^1[3-9]\d{9}$/;

        if (phoneReg.test(phone)) {


            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistPhone.php?phone=" + phone, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    console.log(result);
                    var data = JSON.parse(result);
                    console.log(data);
                    var { status, msg } = data;

                    if (status) {
                        phoneSpan.textContent = "√";
                        phoneSpan.className = "right";
                        isPhoneOk = true;
                    } else {
                        phoneSpan.textContent = "* 手机号已注册!";
                        phoneSpan.className = "err";
                    }

                }
            }

        } else {
            phoneSpan.textContent = "* 手机号码格式不正确";
            phoneSpan.className = "err";
        }
    }

    emailInp.onblur = function () {
        isEmailOk = false;
        var email = emailInp.value.trim();
        emailInp.value = email;

        var emailReg = /^\w+@\w+\.(com|cn|email)$/;

        if (emailReg.test(email)) {


            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistEmail.php?email=" + email, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    console.log(result);
                    var data = JSON.parse(result);
                    console.log(data);
                    var { status, msg } = data;

                    if (status) {
                        emailSpan.textContent = "√";
                        emailSpan.className = "right";
                        isEmailOk = true;
                    } else {
                        emailSpan.textContent = "* 邮箱已注册!";
                        emailSpan.className = "err";
                    }

                }
            }

        } else {
            emailSpan.textContent = "* 邮箱格式有误";
            emailSpan.className = "err";
        }
    }

    codeInp.onblur = function () {
        isCodeOk = false;
        var code = codeInp.value.trim();
        codeInp.value = code;

        var RCode = createCode.innerText;   //随机的验证码
        var codeReg = new RegExp(`^${RCode}$`, "i");

        if (codeReg.test(code)) {
            codeSpan.textContent = "√";
            codeSpan.className = "right";
            isCodeOk = true;
        } else {
            codeSpan.textContent = "* 验证码有误";
            codeSpan.className = "err";
        }
    }

    var isRegisterSuccess = false;  // 记录是否注册成功
    regBtn.onclick = function () {
        if (isRegisterSuccess) return false;

        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk && isCodeOk) {
            // alert("注册成功");
            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            // var xhr = new XMLHttpRequest();

            // xhr.open("post", `../php/register.php`, true);

            // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

            // xhr.onreadystatechange = function () {
            //     if (xhr.readyState == 4 && xhr.status == 200) {
            //         var result = xhr.responseText;
            //         console.log(result);
            //         var data = JSON.parse(result);
            //         console.log(data);
            //         var { status, msg } = data;
            //         if (status) {
            //             isRegisterSuccess = true;
            //             location.href = "./login.html";
            //             // alert("注册成功");
            //         } else {
            //             alert(msg);
            //             isRegisterSuccess = false;
            //         }
            //     }
            // }

            $.ajax({
                type: "post",
                url: "../php/register.php",
                data: { user, pwd, phone, email },
                // async:true,
                dataType: "json",
                success: function (data) { //形式参数(接口返回的响应数据 )
                    var { status, msg } = data;
                    if (status) {
                        isRegisterSuccess = true;
                        location.href = "./login.html";
                        // alert("注册成功");
                    } else {
                        alert(msg);
                        isRegisterSuccess = false;
                    }
                }
            })
        } else {
            isRegisterSuccess = false;
        }
    }







</script>


</html>